<script>
export default {
  name: 'BdTable',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    height: {
      type: [String, Number],
    },
    otherHeight: {
      type: [String, Number],
      default: 0,
    },
    spanMethod: {
      type: [Function],
      default: null,
    },
    fit: {
      type: Boolean,
      default: true,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    summaryMethod: {
      type: [Function],
      default: null,
    },
  },
  data() {
    return {
      isTable: true,
      childrenColumns: [],
      visibleColumnsOffsetStart: 0,
      visibleColumnsOffsetLimit: 24,
      visibleRowOffsetStart: 0,
      visibleRowOffsetLimit: 30,
      scrollTop: 0,
      scrollLeft: 0,
      tdHeight: 45,
      topLineInScreen: 0,
      fitRate: 1,
      realHeight: 500,
      hoverRowIndex: null,
      tableBodyScroll: {
        scrollTop: 0,
        scrollLeft: 0,
      },
      tdTooltipContent: '',
      maxMergeRow: 0,
      hasVerticalScrollBar: true,
    };
  },
  mounted() {
    this.getScrollBarWidth();
    this.getFitRate();
    this.initHeight();
    window.addEventListener('resize', this.windowResizeAction);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResizeAction);
  },
  activated() {
    if (this.tableBodyScroll.scrollLeft > 0 || this.tableBodyScroll.scrollTop) {
      this.$nextTick(() => {
        this.$refs.tableBody.scrollTop = this.tableBodyScroll.scrollTop;
        this.$refs.tableBody.scrollLeft = this.tableBodyScroll.scrollLeft;
        this.bodyScroll({ target: this.tableBodyScroll });
      });
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        setTimeout(() => {
          this.$nextTick(() => {
            this.topLineInScreen = 0;
            this.scrollTop = 0;
            this.scrollLeft = 0;
            this.tableBodyScroll.scrollTop = 0;
            this.tableBodyScroll.scrollLeft = 0;
            this.visibleColumnsOffsetStart = 0;
            this.visibleRowOffsetStart = 0;
            this.visibleColumnsOffsetLimit = 24;
            this.visibleRowOffsetLimit = 30;
            if (this.$refs.tableBody) {
              this.$refs.tableBody.scrollTop = 0;
              this.$refs.tableBody.scrollLeft = 0;
            }
            this.getTdHeight();
            this.getFitRate();
            this.initHeight();
          });
        }, 0);
      },
    },
  },
  methods: {
    windowResizeAction() {
      this.getScrollBarWidth();
      this.getFitRate();
      this.initHeight();
    },
    getSpan(row, column, rowIndex, columnIndex) {
      if (column && column.mergeAllRows) {
        if (rowIndex === this.visibleRowOffsetStart) {
          return { rowspan: this.visibleRows.length, colspan: 1 };
        }
        return { rowspan: 0, colspan: 0 };
      }
      let rowspan = 1;
      let colspan = 1;
      const fn = this.spanMethod;
      if (typeof fn === 'function') {
        const result = fn({
          row,
          column,
          rowIndex,
          columnIndex,
        });
        if (Array.isArray(result)) {
          [rowspan, colspan] = result;
        } else if (typeof result === 'object') {
          rowspan = result.rowspan;
          colspan = result.colspan;
        }
      }
      return { rowspan, colspan };
    },
    bodyScroll(e) {
      const { scrollLeft, scrollTop } = e.target;
      this.tableBodyScroll = {
        scrollLeft,
        scrollTop,
      };
      // 竖直方向 滚过去多少条
      this.$refs.tableHeader.scrollLeft = scrollLeft;
      if (this.$refs.footerTable) {
        this.$refs.footerTable.scrollLeft = scrollLeft;
      }
      const { tdHeight, data } = this;
      const topLineInScreen = Math.floor(scrollTop / tdHeight);
      this.topLineInScreen = topLineInScreen;
      // 获取上一个合并的行
      const getPrevMergeRowIndex = (rowIndex) => {
        let indexCurr = -1;
        let hasZero = false;
        let mergeData = 0;
        this.tableColumns.columnList.forEach((item, index) => {
          if (item.mergeAllRows) {
            return;
          }
          const info = this.getSpan(data[rowIndex], item, rowIndex, index);
          if (info.colspan > 1) {
            mergeData = info.colspan;
          } else if (info.colspan === 0 && mergeData > 0) {
            mergeData -= 1;
          }
          if (info.rowspan === 0 && mergeData < 1) {
            hasZero = true;
          }
          this.maxMergeRow = info.rowspan > this.maxMergeRow && info.rowspan < 100
            ? info.rowspan : this.maxMergeRow;
        });
        if (hasZero && rowIndex > 0) {
          indexCurr = getPrevMergeRowIndex(rowIndex - 1);
        } else {
          indexCurr = rowIndex;
        }
        return indexCurr;
      };
      const prevMergeRowIndex = getPrevMergeRowIndex(topLineInScreen);
      this.visibleRowOffsetStart = prevMergeRowIndex;
      this.scrollTop = prevMergeRowIndex * tdHeight;
      // 固定列滚动
      const { leftFixedTableBody, rightFixedTableBody } = this.$refs;
      if (leftFixedTableBody) {
        leftFixedTableBody.scrollTop = scrollTop;
      }
      if (rightFixedTableBody) {
        rightFixedTableBody.scrollTop = scrollTop;
      }

      // 横向滚动
      let scrollLeftOverIndex = -1;
      let totalScrollLeft = 0;
      this.tableColumns.columnList.forEach((item, index) => {
        if (scrollLeftOverIndex > -1) {
          return;
        }
        if (totalScrollLeft + (item.width * 1) > scrollLeft) {
          scrollLeftOverIndex = index;
        } else {
          totalScrollLeft += item.width * 1;
        }
      });
      const windowWidth = window.innerWidth;
      let widthTotal = 0;
      let widthIndexTotal = -1;
      this.tableColumns.columnList.forEach((item, index) => {
        if (scrollLeftOverIndex > index || widthIndexTotal > -1) {
          return;
        }
        if (widthTotal + (item.width * 1) > windowWidth) {
          widthIndexTotal = index;
        } else {
          widthTotal += item.width * 1;
        }
      });
      // 获取上一个合并的列
      const getMergeColumnIndex = (columnIndex) => {
        let hasZero = false;
        let mergeData = 0;
        let indexCurr = -1;
        const startRow = prevMergeRowIndex;
        const endRow = prevMergeRowIndex + this.visibleRowOffsetLimit;
        for (let i = startRow; i < endRow; i += 1) {
          const info = this.getSpan(data[i],
            this.tableColumns.columnList[columnIndex], i, columnIndex);
          if (info.rowspan > 1) {
            mergeData = info.rowspan;
          } else if (info.rowspan === 0 && mergeData > 0) {
            mergeData -= 1;
          }
          if (info.colspan === 0 && mergeData < 1) {
            hasZero = true;
          }
        }
        if (hasZero && columnIndex > 0) {
          indexCurr = getMergeColumnIndex(columnIndex - 1);
        } else {
          indexCurr = columnIndex;
        }
        return indexCurr;
      };
      const prevMergeColumnIndex = getMergeColumnIndex(scrollLeftOverIndex);
      totalScrollLeft = 0;
      this.tableColumns.columnList.slice(0, prevMergeColumnIndex).forEach((item) => {
        totalScrollLeft += item.width * 1;
      });
      this.scrollLeft = totalScrollLeft;
      this.visibleColumnsOffsetLimit = widthIndexTotal - scrollLeftOverIndex > 24
        ? widthIndexTotal - scrollLeftOverIndex : 24;
      this.visibleColumnsOffsetStart = prevMergeColumnIndex;
    },
    getScrollBarWidth() {
      if (this.scrollBarWidth !== undefined) {
        return;
      }
      const outer = document.createElement('div');
      outer.class = 'el-scrollbar__wrap';
      outer.style.visibility = 'hidden';
      outer.style.width = '100px';
      outer.style.position = 'absolute';
      outer.style.top = '-9999px';
      document.body.appendChild(outer);

      const widthNoScroll = outer.offsetWidth;
      outer.style.overflow = 'scroll';

      const inner = document.createElement('div');
      inner.style.width = '100%';
      outer.appendChild(inner);

      const widthWithScroll = inner.offsetWidth;
      outer.parentNode.removeChild(outer);
      this.scrollBarWidth = widthNoScroll - widthWithScroll;
    },
    getTdHeight() {
      let tdNode = this.$refs.tableBody.querySelector('tr');
      if (tdNode) {
        tdNode = this.$refs.tableHeader.querySelector('tr');
      }
      if (tdNode) {
        this.tdHeight = tdNode.offsetHeight < 10 ? 45 : tdNode.offsetHeight;
        this.visibleRowOffsetLimit = Math.ceil(this.realHeight / this.tdHeight);
      }
    },
    getFitRate() {
      let rate = 1;
      const tableBody = this.$refs.BDTable;
      if (tableBody) {
        rate = tableBody.clientWidth / this.tableWidth;
      }
      this.fitRate = rate > 1 ? rate : 1;
    },
    initHeight() {
      if (!isNaN(this.height * 1) && this.height > 0) {
        this.realHeight = this.height;
        return;
      }
      const childTop = this.$el.getBoundingClientRect ?
        this.$el.getBoundingClientRect().top : this.$el.offsetTop;
      if (childTop === 0) {
        return;
      }
      const parent = document.body;
      const parentHeight = parent.offsetHeight;
      const scrollBarHeight = document.body.clientWidth >= 1280 ? 0 : 10;
      let scale = 1; // 缩放比例
      if (document.body.clientWidth <= 1366) {
        scale = 0.85;
      } else if (document.body.clientWidth <= 1440) {
        scale = 0.9;
      }
      const tableHeaderHeight = this.$refs.tableHeader.offsetHeight;
      let footerTableHeight = 0;
      if (this.$refs.footerTableBox) {
        footerTableHeight = this.$refs.footerTableBox.offsetHeight;
      }
      this.realHeight = (parentHeight / scale) - (childTop / scale)
        - (this.otherHeight + tableHeaderHeight + scrollBarHeight) - footerTableHeight;
      // 是否显示滚动条
      const tableBodyNode = this.$refs.tableBody;
      this.hasVerticalScrollBar = tableBodyNode.offsetHeight < tableBodyNode.scrollHeight;
    },
    rowMouseOver(e, rowIndex) {
      this.hoverRowIndex = rowIndex;
    },
    tdMouseEnter(e) {
      const TdDom = e.target;
      if (TdDom.offsetWidth >= TdDom.scrollWidth + 1) {
        return;
      }
      const tooltip = this.$refs.tooltip;
      this.tdTooltipContent = TdDom.innerText || TdDom.textContent;
      tooltip.referenceElm = TdDom;
      if (tooltip.$refs.popper) {
        tooltip.$refs.popper.style.display = 'none';
      }
      tooltip.doDestroy();
      tooltip.setExpectedState(true);
      tooltip.handleShowPopper();
    },
    tdMouseLeave() {
      const tooltip = this.$refs.tooltip;
      if (tooltip) {
        tooltip.setExpectedState(false);
        tooltip.handleClosePopper();
      }
    },
    BdTableMouseLeave() {
      this.hoverRowIndex = null;
    },
    onMousewheelHandle(e) {
      const { leftFixedTableBody, rightFixedTableBody, tableBody } = this.$refs;
      const scrollTop = tableBody.scrollTop;
      if (leftFixedTableBody) {
        leftFixedTableBody.scrollTop = scrollTop + e.deltaY;
      }
      if (rightFixedTableBody) {
        rightFixedTableBody.scrollTop = scrollTop + e.deltaY;
      }
      if (tableBody) {
        tableBody.scrollTop = scrollTop + e.deltaY;
      }
    },
  },
  computed: {
    tableColumns() {
      const childrenColumnsTmp = this.childrenColumns;
      // 移动fix列到两端
      const fixedLeftColumns = [];
      const fixedRightColumns = [];
      let childrenColumns = [];
      childrenColumnsTmp.forEach((item) => {
        if (item.fixed === 'left') {
          fixedLeftColumns.push(item);
        } else if (item.fixed === 'right') {
          fixedRightColumns.push(item);
        } else {
          childrenColumns.push(item);
        }
      });
      childrenColumns = [...fixedLeftColumns, ...childrenColumns, ...fixedRightColumns];
      const columnList = [];
      // 获取表头的深度 表头拍平
      let deep = 1;
      const allColumn = [...childrenColumns];
      const getDeep = (list = [], curDeep = 1) => {
        // const curDeep = deep;
        list.forEach((itemTmp) => {
          const item = itemTmp;
          item.deep = curDeep;
          let colSpan = 0;
          if (curDeep > deep) {
            deep = curDeep;
          }
          if (item.childrenColumns.length) {
            item.childrenColumns.forEach((CLItem) => {
              allColumn.push(Object.assign(CLItem, { fixed: item.fixed }));
            });
            // allColumn.push(...item.childrenColumns);
            getDeep(item.childrenColumns, curDeep + 1);
            item.childrenColumns.forEach((cItem) => {
              colSpan += cItem.colSpan;
            });
          } else {
            columnList.push(item);
            colSpan = 1;
          }
          item.colSpan = colSpan;
        });
      };
      getDeep(childrenColumns);
      // console.log(allColumn);
      const titleList = [];
      for (let i = 0; i < deep; i += 1) {
        titleList.push([]);
      }
      // 表头分组
      allColumn.forEach((itemTmp) => {
        const item = itemTmp;
        if (!item.childrenColumns.length) {
          item.rowSpan = (deep - item.deep) + 1;
        } else {
          item.rowSpan = 1;
        }
        titleList[item.deep - 1].push(item);
      });
      return {
        titleList,
        columnList,
      };
    },
    tableWidth() {
      return this.tableColumns.columnList.reduce((total, item) => total + (item.width * 1), 0);
    },
    tableVisibleWidth() {
      return this.visibleColumns.reduce((total, item) => total + (item.width * 1), 0);
    },
    visibleRows() {
      const { visibleRowOffsetStart, visibleRowOffsetLimit, maxMergeRow } = this;
      let offset = this.topLineInScreen - this.visibleRowOffsetStart;
      offset = Math.max(Math.max(offset, maxMergeRow), 10);
      return this.data.slice(visibleRowOffsetStart,
        visibleRowOffsetStart + visibleRowOffsetLimit + offset);
    },
    visibleColumns() {
      const { visibleColumnsOffsetStart, visibleColumnsOffsetLimit } = this;
      return this.tableColumns.columnList.slice(visibleColumnsOffsetStart,
        visibleColumnsOffsetStart + visibleColumnsOffsetLimit);
    },
  },
  render() {
    const {
      scrollBarWidth,
      tableColumns,
      bodyScroll,
      // tableWidth,
      scrollTop,
      scrollLeft,
      data,
      tdHeight,
      // tableVisibleWidth,
      visibleColumns,
      visibleRows,
      visibleRowOffsetStart,
      visibleColumnsOffsetStart,
      $slots,
      getSpan,
      fitRate,
      rowMouseOver,
      hoverRowIndex,
      realHeight,
      BdTableMouseLeave,
      onMousewheelHandle,
      tdMouseEnter,
      tdMouseLeave,
      showSummary,
      summaryMethod,
      hasVerticalScrollBar,
    } = this;
    const tableWidth = this.tableWidth * fitRate;
    const tableVisibleWidth = this.tableVisibleWidth * fitRate;
    const colgroupRender = (list, isHeader) => (
      <colgroup>
        {list.map(cItem => (
          <col width={cItem.width * fitRate} />
        ))}
        {
          isHeader ? <col width={scrollBarWidth} /> : ''
        }
      </colgroup>
    );
    const tableHeaderRender = () => (
      <div class="bd-table-header" ref="tableHeader">
        <table class="bd-table_table" style={{ width: `${tableWidth + (hasVerticalScrollBar ? scrollBarWidth : 0)}px` }}>
          {colgroupRender(tableColumns.columnList, hasVerticalScrollBar)}
          <thead>
            {tableColumns.titleList.map((item, tIndex) => (
              <tr>
                {item.map(cItem => (
                  <th rowSpan={cItem.rowSpan} colSpan={cItem.colSpan}>
                    {cItem.renderHeader()}
                  </th>
                ))}
                {hasVerticalScrollBar && tIndex === 0 ? <th rowSpan={tableColumns.titleList.length}></th> : ''}
              </tr>
            ))}
          </thead>
        </table>
      </div>
    );
    const tableBodyRender = () => (
      <div
        class="bd-table-body"
        style={{ maxHeight: `${realHeight}px` }}
        onScroll={bodyScroll}
        ref="tableBody"
      >
        <div class="bd-table-body-content"
          style={{
            width: `${tableWidth - (2 * fitRate)}px`,
            paddingTop: `${scrollTop}px`,
            paddingLeft: `${scrollLeft}px`,
            height: `${(data.length || 1) * tdHeight}px`,
          }}>
          <table class="bd-table_table" style={{ width: `${tableVisibleWidth}px` }}>
            {colgroupRender(visibleColumns)}
            <tbody>
              {visibleRows.map((item, $index) => (
                <tr
                  class={{ 'hover-row': hoverRowIndex === $index }}
                  onMouseover={(e) => { rowMouseOver(e, $index); }}
                >
                  {visibleColumns.map((cItem, cellIndex) => {
                    const { rowspan, colspan } = getSpan(item, cItem,
                      $index + visibleRowOffsetStart,
                      cellIndex + visibleColumnsOffsetStart);
                    if (!rowspan || !colspan) {
                      return null;
                    }
                    return (
                      <td
                        onMouseenter={e => tdMouseEnter(e)}
                        onMouseleave={e => tdMouseLeave(e)}
                        rowspan={ rowspan }
                        colspan={ colspan }
                        class={rowspan > 40 ? 'align-top' : ''}
                      >{cItem.renderCell(item)}</td>
                    );
                  })
                  }
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
    const tableFixedHeaderRender = (fixed, isHeader) => {
      const titleList = [];
      tableColumns.titleList.forEach((itemTmp) => {
        titleList.push(itemTmp.filter(item => item.fixed === fixed));
      });
      const columnList = tableColumns.columnList.filter(item => item.fixed === fixed);
      const fixTableWidth = columnList.reduce((total, item) => total + (item.width * 1), 0);
      return (
        <div class="bd-table-header">
          <table class="bd-table_table" style={{ width: `${fixTableWidth * fitRate}px` }}>
            {colgroupRender(columnList, isHeader && hasVerticalScrollBar)}
            <thead>
              {titleList.map(item => (
                <tr>
                  {item.map(cItem => (
                    <th rowSpan={cItem.rowSpan}
                      colSpan={cItem.colSpan}
                      style={{ height: `${tdHeight * cItem.rowSpan}px` }}
                    >{cItem.renderHeader()}</th>
                  ))}
                </tr>
              ))}
            </thead>
          </table>
        </div>
      );
    };
    const tableFixedBodyRender = (fixed) => {
      const columnList = tableColumns.columnList.filter(item => item.fixed === fixed);
      const fixTableWidth = columnList.reduce((total, item) => total + (item.width * 1), 0);
      const cellIndex = cellItem => tableColumns.columnList
        .findIndex(item => item === cellItem);
      return (
        <div
          class="bd-table-body"
          style={{ maxHeight: `${realHeight - scrollBarWidth}px` }}
          ref={`${fixed}FixedTableBody`}
          onMousewheel={onMousewheelHandle}
        >
          <div class="bd-table-body-content"
            style={{
              width: `${fixTableWidth * fitRate}px`,
              paddingTop: `${scrollTop}px`,
              height: `${data.length * tdHeight}px`,
            }}>
            <table class="bd-table_table" style={{ width: `${fixTableWidth * fitRate}px` }}>
              {colgroupRender(columnList)}
              <tbody>
                {visibleRows.map((item, $index) => (
                  <tr
                    class={{ 'hover-row': hoverRowIndex === $index }}
                    onMouseover={(e) => { rowMouseOver(e, $index); }}
                  >
                    {columnList.map((cItem) => {
                      const { rowspan, colspan } = getSpan(item, cItem,
                        $index + visibleRowOffsetStart,
                        cellIndex(cItem));
                      if (!rowspan || !colspan) {
                        return null;
                      }
                      return (
                        <td
                          onMouseenter={e => tdMouseEnter(e)}
                          onMouseleave={e => tdMouseLeave(e)}
                          rowSpan={rowspan}
                          colSpan={colspan}
                          style={{ realHeight: `${tdHeight * rowspan}px` }}
                          class={rowspan > 20 ? 'align-top' : ''}
                        >{cItem.renderCell(item)}</td>
                      );
                    })
                    }
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      );
    };
    const fixedTableRender = (fixed) => {
      const columnList = tableColumns.columnList.filter(item => item.fixed === fixed);
      const fixTableWidth = columnList.reduce((total, item) => total + (item.width * 1), 0);
      if (columnList.length === 0) {
        return '';
      }
      return (
        <div class={[`bd-table-box_${fixed}-fixed`, 'box-shadow']}
          style={{
            width: `${fixTableWidth * fitRate}px`,
            right: fixed === 'right' ? `${scrollBarWidth}px` : 'auto',
          }}>
          {tableFixedHeaderRender(fixed, false)}
          {tableFixedBodyRender(fixed, false)}
        </div>
      );
    };
    // 底部fixed
    const fixedFooterTableBodyRender = (fixed, list) => {
      let listData = [];
      let columnList = tableColumns.columnList.filter((item, index) => {
        if (item.fixed === fixed) {
          listData.push(list[index]);
          return true;
        }
        return false;
      });
      if (fixed === 'none') {
        listData = list;
        columnList = tableColumns.columnList;
      }
      if (!columnList.length) {
        return '';
      }
      const fixTableWidth = columnList.reduce((total, item) => total + (item.width * 1), 0);
      return (
        <div class={[`bd-table-box_${fixed}-fixed`, fixed !== 'none' ? 'box-shadow' : '']}
          ref={`footerTable${fixed !== 'none' ? fixed : ''}`}
          style={{ width: fixed !== 'none' ? `${fixTableWidth * fitRate}px` : '100%' }}
        >
          <table
            class="bd-table_table"
            style={{ width: fixed !== 'none' ? `${fixTableWidth * fitRate}px` : `${tableWidth}px` }}>
            {colgroupRender(columnList, hasVerticalScrollBar)}
            <tbody>
              <tr class='hover-row'>
                {
                  listData.map((cItem) => {
                    const info = typeof cItem === 'object' ? cItem : { val: cItem, rowSpan: 1, colSpan: 1 };
                    if (!info.rowSpan || !info.colSpan) {
                      return '';
                    }
                    return (
                      <td
                        rowSpan={info.rowSpan}
                        colSpan={info.colSpan}
                      >{info.val}</td>
                    );
                  })
                }
              </tr>
            </tbody>
          </table>
        </div>
      );
    };
    // 底部合计行
    const fixedFooterTableRender = () => {
      if (!showSummary || typeof summaryMethod !== 'function') {
        return '';
      }
      const dataList = summaryMethod({ columns: tableColumns.columnList, data }) || [];
      return (
        <div class="bd-table-box bd-table_footer" ref="footerTableBox">
          {fixedFooterTableBodyRender('left', dataList)}
          {fixedFooterTableBodyRender('right', dataList)}
          {fixedFooterTableBodyRender('none', dataList)}
        </div>
      );
    };
    const tableRender = (
      <div class="bd-table-box">
        {tableHeaderRender()}
        {tableBodyRender()}
      </div>
    );
    return (
      <div class="bd-table"
        ref="BDTable"
        onMouseleave={() => BdTableMouseLeave()}
      >
        {fixedTableRender('left')}
        {fixedTableRender('right')}
        {tableRender}
        {visibleRows.length ? fixedFooterTableRender() : ''}
        {!visibleRows.length ? <div class="table-empty-tip">暂无数据</div> : ''}
        <el-tooltip placement="top" ref="tooltip" content={ this.tdTooltipContent }></el-tooltip>
        <div class="hidden-column" ref="hiddenColumn">
          {$slots.default}
        </div>
      </div>
    );
  },
};
</script>

<style lang="less">
.bd-table {
  background-color: #fff;
  overflow: auto;
  position: relative;
  .table-empty-tip{
    width: 100%;
    text-align: center;
    color: #999;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 14px;
  }
  .bd-table-box {
    overflow: hidden;
  }
  .bd-table-header {
    overflow: hidden;
    background-color: #F5F7FA;
  }
  .bd-table-body {
    overflow: auto;
  }
  .bd-table-body-content {
    overflow: hidden;
    box-sizing: border-box;
  }
  .bd-table-box {
    border-right: 1px solid #EBEEF5;
    border-bottom: 1px solid #EBEEF5;
  }
  &_table {
    border-collapse: collapse;
    /*min-width: 100%;*/
    table-layout: fixed;
    th,
    td {
      border: 1px solid #EBEEF5;
      text-align: center;
      white-space: nowrap;
      height: 45px;
      padding: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      box-sizing: border-box;
    }
    th{
      color: rgba(0,0,0,0.85);
      font-weight: 500;
    }
    td{
      font-size: 14px;
      color: #606266;
      &.align-top{
        vertical-align: top;
      }
    }
    tr.hover-row{
      td{
        background-color: #F5F7FA;
        transition: background-color .25s ease;
      }
    }
  }
  .hidden-column {
    display: none;
  }
  .bd-table-box_left-fixed,.bd-table-box_right-fixed{
    position: absolute;
    background-color: #ffffff;
    border-right: 1px solid #e7e7e7;
    z-index: 2;
    .bd-table-body {
      overflow: hidden;
    }
  }
  .bd-table-box_left-fixed{
    left: 0;
    top: 0;
  }
  .bd-table-box_right-fixed{
    right: 0;
    top: 0;
  }
  .box-shadow{
    box-shadow: 0 0 10px rgba(0,0,0,.12);
  }
  .bd-table_footer{
    position: relative;
    >div{
      overflow: hidden;
    }
  }
}
</style>
